<template>
<!--我喜欢的歌单-->
  <div class="showlist">
    <ul v-if="list">
      <li class="remarks">
        <div class="flex2">
          <p>歌单名</p>
        </div>
        <div>
          <p>创建者</p>
        </div>
        <div class="cen">
          <p>几首</p>
        </div>
      </li>
      <li v-for="(val,index) in list" :key="index">
        <mysongList :songInfo='val'/>
      </li>
    </ul>
  </div>
</template>

<script>
import mysongList from "components/business/mysongList";
import require from "requests/getSong";
export default {
  name: "songList",
  data(){
    return {
      list:null
    }
  },
  components: {
    mysongList
  },
  methods: {
    getsongList() {
      require.getSongList(this.$store.state.userId).then(res => {
        this.list=res.data.playlist
      });
    },
  },
  mounted() {
      this.getsongList()
    }
};
</script>

<style scoped lang='less'>
  .showlist{
    ul{
      li{
        margin: 8px 0;
      }
    }
    .remarks{
      display: flex;
      div{
        flex: 1;
        color: #999;
      }
      .flex2{
        flex: 2;
      }
      .cen{
        p{
          text-align: center;
        }
      }
    }
  }
</style>